<template>
  <div class="my">
    <!-- 头部背景 -->
    <Title class="bgc">个人中心</Title>
    <div class="myTopBGC" @click="shareLogin">
      <div class="myInfo">
        <!-- 个人信息 -->
        <div class="myUserInfo">
          <!-- 个人图片 -->
          <van-image round width="90px" height="90px" :src="myUserInfo.src" />
          <h1>{{myUserInfo.name}}</h1>
          <p>{{myUserInfo.name}}</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-cell-group inset class="topCell">
      <div class="topCellitem">
        <span>{{myUserInfo.collect.length}}</span>
        <p>收藏</p>
      </div>
      <div class="topCellitem">
        <span>{{myUserInfo.coupon.length}}</span>
        <p>优惠券</p>
      </div>
      <div class="topCellitem">
        <span>{{myUserInfo.footprint.length}}</span>
        <p>我的足迹</p>
      </div>
    </van-cell-group>
    <!-- 我的订单 -->
    <van-cell-group inset class="grid">
      <van-cell title="我的订单" @click="$router.push('/order')" is-link value="全部" />
      <van-grid :border="false">
        <van-grid-item
          v-for="(item,index) in orderData"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
          @click="goOrder(index)"
        />
      </van-grid>
    </van-cell-group>
    <!-- 个人设置 -->
    <van-cell-group inset class="itemSF">
      <van-cell
        class="itemS"
        v-for="(item,index) in mySeting"
        :key="index"
        :icon="item.icon"
        :title="item.name"
        @click="CellSetting(item.path)"
        is-link
      />
    </van-cell-group>

    <keep-alive>
      <RightAnimate>
        <router-view class="animated"></router-view>
      </RightAnimate>
    </keep-alive>
  </div>
</template>

<script>
import Title from '@/components/Title/Title.vue'
import RightAnimate from '@/components/Animate/RightAnimate.vue'
// 登陆页面
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'YscShopMy',

  data () {
    return {
      // 订单动能
      orderData: [
        {
          id: 34,
          name: '代付款',
          icon: 'balance-pay',
        },
        {
          id: 35,
          name: '待发货',
          icon: 'peer-pay',
        },
        {
          id: 36,
          name: '待收货',
          icon: 'logistics',
        },
        {
          id: 37,
          name: '已完成',
          icon: 'completed',
        },

      ],
      // 个人设置
      mySeting: [
        {
          name: '我的地址',
          icon: 'location-o',
          path: '/address'
        },
        {
          name: '联系客服',
          icon: 'comment-o',
          path: '/serve'
        },
        {
          name: '关于我们',
          icon: 'smile-o',
          path: '/baseCenter'
        },
        {
          name: '设置',
          icon: 'setting-o',
          path: '/setting'
        }
      ],
      // 登陆成功token
      token: false,
    };
  },
  components: {
    Title,
    RightAnimate
    // myView,
    // Address/
  },
  created () {
    // 判断是否已经登陆
    if (!window.localStorage.getItem('userInfo')) return
    const userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
    // 获取用户数据传入vuex
    this.setUserInfo(userInfo)
  },
  computed: {
    ...mapState(['myUserInfo']),
  },
  mounted () {
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    // 无token 先登陆
    shareLogin () {
      // 判断是否登陆
      if (!this.myUserInfo.active) {
        this.$router.push('/login')
        return this.isLogin = !this.isLogin
      }
    },
    // 个人设置
    CellSetting (path) {
      this.$router.push(path)
    },
    goOrder (index) {
      this.$router.push({
        path: '/order',
        query: {
          index: index + 1
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.my {
  // title自定义
  .bgc {
    height: 60px;
    background: transparent;
    font-size: 16px;
    color: #323334;
    text-align: center;
    line-height: 90px;
    position: fixed;
    left: 0px;
    width: 100%;
    color: #fff;
  }
  // 顶部颜色
  .myTopBGC {
    height: 260px;
    background: linear-gradient(to left bottom, #f9956a, #fa8547, #ffa76b);
    border-radius: 0px 0px 20px 20px;
  }
  .myInfo {
    // 用户信息
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .myUserInfo {
      padding: 10px;
      box-sizing: border-box;
      width: 150px;
      height: 150px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      .van-image {
        border: 2px solid #fff;
      }
      h1 {
        font-size: 16px;
        font-weight: bold;
      }
      p {
        font-size: 12px;
      }
    }
  }
  .topCell {
    // margin-top: 10px;
    margin-top: -45px;
    display: flex;
    padding: 10px;
    .topCellitem {
      flex: 1;
      font-size: 14px;
      text-align: center;
      span {
        color: #f96c2f;
      }
    }
    .topCellitem:nth-child(2) {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }
  }

  .grid {
    // 我的订单 grid
    margin-top: 5px;
    margin-bottom: 5px;
    .van-grid {
      border: none;
    }
    .van-cell__title {
      font-weight: bold;
    }
    .van-cell__value {
      font-size: 12px;
    }
  }
  .itemSF {
    padding: 7px;
    .itemS {
      padding-top: 6px;
      padding-bottom: 6px;
      .van-cell__title {
        font-size: 12px;
      }
      .van-icon {
        font-size: 16px;
      }
    }
  }
}
</style>